<!DOCTYPE html>
<html lang="en" > 
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>在线预约保养系统</title>
<link rel="stylesheet" href="css/split-pane.css" />
<link rel="stylesheet" type="text/css" href="lib/bootstrap/dist/css/bootstrap.css">

<style type="text/css">
html, body {
    height: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
}
/* The styling bolow is very simple. You can style things your own way. */
body {
    box-sizing: border-box;
    background: #fff;
    padding: 1px;
}
.split-pane-divider {
    background: #eee;
}
.split-pane-component {
    background: #fff; 
}
.data-split-pane-component{   
    overflow:hidden;
}
</style>
</head>

<body data-ng-app="bookApp" ng-cloak class="ng-cloak">

<div data-split-pane>
    <div data-split-pane-component  data-height="90px">
        <div class="pretty-split-pane-component-inner"><div >
                <div class="spacer" style="width:10px;height:20px"></div>
                <h1>在线预约保养系统</h1>
            </div>
        </div>
    </div>
    <div data-split-pane-divider data-height="1px"></div>
    <div data-split-pane-component >
    <div data-split-pane> 
            <div data-split-pane-component >
                <h3>新订单</h3>
                <div class ="orderDetails" ng-controller="newOrder">
                    <table class="table">
                        <thead>
                            <tr> 
                                <th>订单编号</th>
                                <th>时间</th>
                                <th>4S店</th>
                                <th>汽车型号</th>
                                <th>用户</th>
                            </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>{{orderId}}</td>
                            <td>{{orderTime}}</td> 
                            <td>{{storeName}}</td> 
                            <td>{{carFullName}}</td> 
                            <td>{{userName}}</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div data-split-pane-component data-height="40px">
                <div class ="orderButtons" ng-controller="buttonCtrl">
                  <button type="button" class="btn btn-primary  " data-ng-click="book()" style="width:160px;height:40px;float:right" >预订</button>
                   <div class="spacer" style="width:10px;height:40px;float:right"></div>
                <button type="button" class="btn btn-primary " onclick="returnToMap()" style="width:160px;height:40px;float:right"  >返回</button> 
                </div>
              
            </div>
        </div>
    </div>
    </div>
    <script src="js/jquery.min.js"></script>
    <script src="js/angular.min.js"></script>
    <script src="js/split-pane.js"></script>
    <script src="js/angular-split-pane.js"></script>
    <script src="js/app.js"></script>  

    <script>

angular.module('bookApp', ['shagstrom.angular-split-pane']) 
    .controller('newOrder', function($scope,$http) {
        $scope.isneworder=localStorage.getItem("isneworder");
        $scope.orderId=localStorage.getItem("orderId");
        $scope.orderTime=localStorage.getItem("orderTime");
        $scope.storeId=localStorage.getItem("storeId");
        $scope.storeName=localStorage.getItem("storeName");
        $scope.carID=localStorage.getItem("carID");
        $scope.carFullName=localStorage.getItem("carFactory")+localStorage.getItem("carName");
        $scope.userId=localStorage.getItem("userId");
        $scope.userName=localStorage.getItem("userName");})
         .controller('buttonCtrl', function($scope,$http) {       
        $scope.book= function() {
        var isneworder=localStorage.getItem("isneworder");
        var orderId=localStorage.getItem("orderId");
        var orderTime=localStorage.getItem("orderTime");
        var storeId=localStorage.getItem("storeId");
        var storeName=localStorage.getItem("storeName");
        var carID=localStorage.getItem("carID");
        var carFullName=localStorage.getItem("carFactory")+localStorage.getItem("carName");
        var userId=localStorage.getItem("userId");
        var userName=localStorage.getItem("userName");
            $http.post("/orderserver/addorder?orderId="+orderId+"&orderTime="+orderTime+"&storeId="+storeId+"&carID="+carID+"&userId="+userId+"&orderStatus=未支付").then(function(response){
                console.log(response.data);
                alert('预订成功！');
                returnToMap();
            });
        }
    ;});
    </script>
    </body>
    </html>
